import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
// import Tabbar from '../components/01tabbar.vue'
import Tabbar from '../components/01tabbar.vue' 

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    //重定向   (当访问路径为 http://localhost:8080/ 敲回车 自动跳转到 tp://localhost:8080/#/home)
    redirect:'/home' 
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path:'/tab',
    name: 'tab',
    component:() => import('../views/tab.vue'),
  },
  {
    path:'/tabbar',
    name: 'tabbar',
    // component:Tabbar
    // 路由懒加载
    component: () => import('../components/01tabbar.vue')
  },
  {
    path: '/about',
    name: 'about', 
    component: () => import('../views/AboutView.vue')
  }
  ,
  // 配置【一级路由】
  // 直接在地址栏中进行测试
  {
    path: '/news',
    name: 'news', 
    component: () => import('../views/NewsView.vue'),
    redirect:'/news/pic',
    //嵌套路由 children 【二级路由】 
    //注意：二级路由也需要有对应的路由出口 router-view
    //二级路由访问 
    //path没有/   访问要携带上一级  /news/text
    //path有/     路径会被当成是根路径   /text
    children:[
       {path:'text',component: () => import('../views/NewsTxt.vue')}, 
       //配置路由传参 :参数名  :id
       {path:'text/:id/:title',name:'textdetail',component: () => import('../views/NewsDetail.vue')},
       {path:'pic',component: () => import('../views/NewsPicture.vue')}, 
    ]
  }
] 
const router = new VueRouter({
  // 路由模式： history  hash
  //如果配置的是history，页面刷新 可能会出现404的错误 需要后台配合进行设置。
  mode:"hash",
  routes
}) 

//解决路由重复点击的bug
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

export default router
